<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现点赞加1的效果</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
    body{margin:100px;}
    a{margin:100px;padding:10px;background-color:#ddd;color:#333;font-size:20px;text-decoration:none;}
</style>
</head>
<body>
 
    <a id="good" href="javascript:void(0)">点赞点赞点赞点赞</a>
 
<script>
 
//单点击点赞按钮或者链接的时候
$('#good').click(function(){
    $("#good").append("<span class='tips_box' style=''>赞一个</span>");
    var box = $(".tips_box");
    var self = $(this);
    var top = self.offset().top;
    var left = self.offset().left + self.width() / 2 - box.width() / 2;
     
    box.css({
        "position": "absolute",
        "top": top,
        "left": left,
        "font-size": '16px',        //开始时候的字体大小
        "font-family": 'Microsoft Yahei',
        "color": 'red',
    });
 
    box.animate({
        "top": top - 50,
        "left": left - 50,
        "opacity": 0.8,         //透明度
        "font-size": '40px'     //动画结束时候的效果
    }, 800, function() {
        box.remove();
    });
 
});
     
</script>
</body>
</html>